<template>
	<view class="empire-category">
		<EmpireSearch ref="searchBar"></EmpireSearch>
		<view class="empire-category__content" :style="mainStyle">
			<view class="empire-category__left">
				<EmpireMenu v-model="activeName" :list="menus" @change="handleQuery"></EmpireMenu>
			</view>
			<scroll-view :scroll-y="true" :show-scrollbar="false" class="empire-category__right">
				<EmpireCard background-color="#fff" :custom-style="{ padding: '30rpx', borderRadius: '0 24rpx 0 0' }">
					<template #title>
						<view class="empire-image__title">
							<view class="empire-image__title-text">夏季运动健身装备</view>
							<EmpireTag size="mini" type="danger" background-color="#dc3023" text="领卷满200减20" />
						</view>
					</template>
					<EmpireImageHorizontal
						width="140rpx"
						height="140rpx"
						v-for="(item, key) in categroys"
						:key="key"
						:title="item.name"
						:src="item.profile"
						grid-template-rows="2fr 2fr 1fr"
						grid-template-columns="1fr 3fr"
						to="/pages/category/product-detail"
					>
						<template #subTitle>
							<view class="empire-image__tags">
								<EmpireTag type="primary" size="mini" text="极速退款" />
								<EmpireTag type="warn" size="mini" text="正品保障" />
							</view>
						</template>
						<template #description class="empire-mall__flex-between">
							<view class="empire-image__price">
								<text class="empire-mall__price">¥ {{ item.discount || '0.00' }}</text>
								<text v-if="item.price" class="origin-price">¥ {{ item.price }}</text>
							</view>
							<uni-icons
								class="empire-mall__plus"
								type="plus-filled"
								color="#1BA4F0"
								size="24"
								@click.prevent="handlePlus"
							/>
						</template>
					</EmpireImageHorizontal>
				</EmpireCard>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
import EmpireSearch from '@/components/empire-search.vue';
import EmpireMenu from '@/components/empire-menu';
import EmpireCard from '@/components/empire-card';
import EmpireImageHorizontal from '@/components/empire-image/empire-image-horizontal.vue';
import EmpireTag from '@/components/empire-tag.vue';
import { ref, shallowReactive, onMounted } from 'vue';
import { product as api } from '@/api/api.js';

const activeName = ref('1');
const searchBar = ref();
const mainStyle = shallowReactive({
	top: 0
});
const menus = ref([
	{ name: '1', label: '肌肉力量' },
	{ name: '2', label: '功能补充' },
	{ name: '3', label: '运动辅助' },
	{ name: '4', label: '健身周边' },
	{ name: '5', label: '运动器械' },
	{ name: '6', label: '品牌甄选' }
]);
const categroys = ref();
onMounted(() => {
	uni
		.createSelectorQuery()
		.in(searchBar.value)
		.select('.search-wrap')
		.boundingClientRect((node) => {
			mainStyle.top = `${node?.height || 0}px`;
		})
		.exec();
	init();
});
function init() {
	api.getProductList().then(({ data: result }) => {
		const { success, data } = result;
		if (success) {
			categroys.value = data;
		}
	});
}
function handlePlus() {}
function handleQuery(value) {
	init();
}
</script>

<style lang="scss" scoped>
.empire-category {
	width: 100%;
	height: 100%;
}
.empire-category__content {
	position: absolute;
	bottom: 0;
	left: 20rpx;
	right: 20rpx;
	display: flex;
}

.empire-image__title {
	display: grid;
	grid-template-rows: 2fr 1fr;
	height: 120rpx;
	padding-left: 48rpx;
	background-color: #fd6363;
	color: #fff;
	border-radius: 12rpx 12rpx 0 0;
	&-text {
		display: flex;
		align-items: center;
		font-size: 36rpx;
	}
}

.empire-category__left {
	width: 200rpx;
}
.empire-category__right {
	width: 100%;
	border-radius: 0 16rpx 16rpx 0;
	background-color: #fff;
}
.empire-image__tags {
	display: flex;
	justify-content: space-around;
}
.empire-image__price {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.origin-price {
	text-decoration-line: line-through;
	color: #c0c6cc;
	margin-left: 36rpx;
}
.empire-mall__plus {
	display: flex;
	align-self: center;
}
</style>
